<template>
  <view class="themeItem">
    <!-- 普通主题卡片 -->
    <navigator url="/pages/classlist/classlist" class="box" v-if="!isMore">
      <image class="pic" src="../../static/classify1.jpg" mode="aspectFill"></image>
      <view class="mask">明星美女</view>
      <view class="tab">3天前更新</view>
    </navigator>
    
    <!-- 更多卡片（带省略号图标） -->
    <navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore">
      <image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
      <view class="mask">
        <view class="more-content">
          <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
          <view class="ellipsis">⋯</view>
          <view class="text">更多</view>
        </view>
      </view>
    </navigator>
  </view>
</template>

<script>
export default {
  name: "theme-item",
  props: {
    isMore: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.themeItem {
  .box {
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    
    .pic {
      width: 100%;
      height: 100%;
    }
    
    .mask {
      width: 100%;
      height: 70rpx; 
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(20rpx);
      font-weight: 600;
      font-size: 30rpx;
    }
    
    .tab {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(250,129,90,0.7);
      backdrop-filter: blur(20rpx);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      border-radius: 0 0 20rpx 0;
      transform: scale(0.8);
      transform-origin: left top;
    }
    
    &.more {
      .mask {
        width: 100%;
        height: 100%;
        
        .more-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          
          .ellipsis {
            font-size: 40rpx;
            line-height: 0.5;
            margin: 5rpx 0;
          }
          
          .text {
            font-size: 28rpx;
            margin-top: 5rpx;
          }
        }
      }
    }
  }
}
</style>